<!--
* @author wn
* @date 2022/05/06 14:46:48
* @description: 品牌组件
!-->
<template>
	<div class="home-brand" ref="target">
		<home-panel title="热门品牌" subTitle="国际经典 品质保证">
			<template #right>
				<a
					href="javascript:;"
					class="iconfont icon-angle-left prev"
					:class="{ disabled: index === 0 }"
					@click="toggle(-1)"
				></a>
				<a
					href="javascript:;"
					class="iconfont icon-angle-right next"
					:class="{ disabled: index === 1 }"
					@click="toggle(1)"
				></a>
			</template>
			<!-- 默认插槽 -->
			<!-- :style="`transform:translateX(${index === 0 ? 0 : -50}%)`" -->
			<transition name="fade">
				<div class="box" v-if="result.length">
					<ul class="list" :style="[move]">
						<li v-for="i in result" :key="i.id">
							<RouterLink to="/">
								<img v-lazy="i.picture" alt="" />
							</RouterLink>
						</li>
					</ul>
				</div>
				<!-- 骨架屏 -->
				<div v-else class="skeleton">
					<xtx-skeleton
						v-for="i in 5"
						:key="i"
						width="240px"
						height="305px"
						bg="#e4e4e4"
						animated
					/>
				</div>
			</transition>
		</home-panel>
	</div>
</template>
<script>
import HomePanel from './HomePanel'
import { useLazyData } from '@/hooks'
import { findBrandList } from '@/network/home'
import { computed, ref } from 'vue'
export default {
	name: 'HomeBrand',
	components: {
		HomePanel,
	},
	setup() {
		// 调用懒加载函数，获取数据
		// 箭头函数的 执行结果 是一个带参数的函数
		const { target, result } = useLazyData(() => findBrandList(10))
		// 点击切换的索引
		const index = ref(0)
		const toggle = step => {
			const currIndex = index.value + step
			if (currIndex < 0 || currIndex > 1) return
			index.value = currIndex
		}
		// 滑动 位移计算
		const move = computed(
			() => `transform:translateX(${index.value === 0 ? 0 : -50}%)`
		)
		return { target, result, index, toggle, move }
	},
}
</script>
<style scoped lang="less">
.home-panel {
	background-color: #f5f5f5;
	.iconfont {
		display: inline-block;
		width: 20px;
		height: 20px;
		// background: #ccc;
		background: @xtxColor;
		color: #fff;
		text-align: center;
		margin-left: 5px;
		&::before {
			font-size: 12px;
			position: relative;
			top: -2px;
		}
		&.disabled {
			background: #ccc;
			cursor: not-allowed;
		}
	}
}
.box {
	width: 100%;
	height: 345px;
	overflow: hidden;
	padding-bottom: 40px;
	.list {
		display: flex;
		width: 200%;
		transition: all 1s;
		li {
			margin-right: 10px;
			width: 240px;
			// n=1 2 3
			&:nth-child(5n) {
				margin-right: 0;
			}
			img {
				width: 240px;
				height: 305px;
			}
		}
	}
}
// 骨架屏
.skeleton {
	height: 345px;
	& .xtx-skeleton {
		margin-right: 10px;
		&:last-child {
			margin-right: 0;
		}
	}
	// & .xtx-skeleton:last-child {
	// 	margin-right: 0;
	// }
}
</style>
